<template>
  <div class="help-farmers-zone">
    <!-- 主标题 -->
    <h1 class="title">乡村振兴资讯中心</h1>
    
    <!-- 最新农业资讯板块 -->
    <section class="news-section">
      <h2 class="section-title">最新助农资讯</h2>
      <div class="news-list">
        <div v-for="(item, index) in newsList" :key="index" class="news-item">
          <div class="image-placeholder"></div>
          <div class="content">
            <h3>{{ item.title }}</h3>
            <p class="desc">{{ item.content }}</p>
            <div class="meta">
              <span class="date">{{ item.date }}</span>
              <div class="stats">
                <span class="views">👁️ {{ item.views }}</span>
                <span class="favorites">❤️ {{ item.favorites }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

     <section class="video-section">
      <h2 class="section-title">助农视界</h2>
      <div class="video-grid">
        <div v-for="(video, index) in videos" :key="index" class="video-card">
          <div class="video-container">
            <div class="thumbnail" :style="{ backgroundImage: 'url(' + video.thumb + ')' }">
              <button class="play-button">▶</button>
            </div>
            <div class="video-info">
              <h3>{{ video.title }}</h3>
              <p class="desc">{{ video.description }}</p>
              <div class="meta">
                <span class="author">👨🌾 {{ video.author }}</span>
                <div class="stats">
                  <span class="views">👁️ {{ video.views }}次观看</span>
                  <span class="likes">👍 {{ video.likes }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 政策热点轮播 -->
    <section class="policy-carousel">
      <h2 class="section-title">助农政策速递</h2>
      <div class="carousel-container">
        <div class="policy-item">
          <h3>财政部新规：农产品电商补贴提升至15%</h3>
          <p>对入驻助农平台的农户提供物流费用专项补贴，单月最高2000元...</p>
        </div>
        <div class="policy-item">
          <h3>数字乡村建设试点名单公示</h3>
          <p>全国新增50个智慧农业示范村，配套500万专项扶持资金...</p>
        </div>
      </div>
    </section>

    <!-- 技术指导专区 -->
    <section class="tech-section">
      <h2 class="section-title">农技云课堂</h2>
      <div class="tech-grid">
        <div class="tech-card">
          <div class="tag">病虫害防治</div>
          <h3>秋冬季柑橘黄龙病防治指南</h3>
          <p class="meta">主讲：省农科院 李教授 | 直播时间：9月25日 14:00</p>
          <div class="stats">
            <span>👥 已预约：328人</span>
            <span>📅 倒计时2天</span>
          </div>
        </div>
        <div class="tech-card">
          <div class="tag">智慧农业</div>
          <h3>物联网大棚搭建实操教学</h3>
          <p class="meta">案例：寿光蔬菜基地 | 课程时长：120分钟</p>
          <div class="stats">
            <span>⭐ 评分：4.9</span>
            <span>📚 已学习：1.2万人</span>
          </div>
        </div>
      </div>
    </section>

     <!-- 助农先锋榜 -->
    <section class="pioneer-section">
      <h2 class="section-title">助农先锋榜</h2>
      <div class="pioneer-list">
        <div class="pioneer-card">
          <div class="avatar"></div>
          <h3>草莓西施-张大姐</h3>
          <p class="achievement">通过直播带货帮助全村销售草莓5.2吨</p>
          <div class="badges">
            <span>🏆 销售冠军</span>
            <span>💡 创新达人</span>
          </div>
        </div>
        <div class="pioneer-card">
          <div class="avatar"></div>
          <h3>新农人团队</h3>
          <p class="achievement">开发智能灌溉系统降低用水成本40%</p>
          <div class="badges">
            <span>🌱 技术先锋</span>
            <span>🤝 最佳团队</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 新农产品展示 -->
    <section class="products-section">
      <h2 class="section-title">新农品展示</h2>
      <div class="product-grid">
        <div v-for="(product, index) in products" :key="index" class="product-card">
          <div class="product-image"></div>
          <div class="product-info">
            <h3>{{ product.name }}</h3>
            <p class="desc">{{ product.description }}</p>
            <div class="stats">
              <span>👁️ {{ product.views }}</span>
              <span>❤️ {{ product.favorites }}</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 新增农产品溯源展示 -->
    <section class="trace-section">
      <h2 class="section-title">透明溯源</h2>
      <div class="trace-card">
        <div class="map-visual"></div>
        <div class="trace-info">
          <h3>日照绿茶成长日记</h3>
          <div class="timeline">
            <div class="step">
              <span class="date">3月15日</span>
              <p>有机肥施用，土壤PH值检测6.8</p>
            </div>
            <div class="step">
              <span class="date">6月20日</span>
              <p>人工采摘，筛选标准：一芽两叶</p>
            </div>
          </div>
          <div class="qrcode">扫码查看完整溯源信息</div>
        </div>
      </div>
    </section>

      <!-- 新增志愿者招募 -->
    <section class="volunteer-section">
      <h2 class="section-title">助农志愿团</h2>
      <div class="mission-board">
        <div class="mission">
          <h3>📦 周末物流支援</h3>
          <p>时间：每周六上午 | 地点：农产品集散中心</p>
          <div class="progress">已报名：23/30人</div>
        </div>
        <div class="mission">
          <h3>📷 农产品摄影培训</h3>
          <p>时间：9月28日 | 讲师：视觉中国签约摄影师</p>
          <div class="progress">已报名：45人</div>
        </div>
      </div>
    </section>

    <!-- 评论区 -->
    <section class="comments-section">
      <h2 class="section-title">交流讨论区</h2>
      <div class="comment-input">
        <input v-model="newComment" placeholder="留下您的助农建议...">
        <button @click="addComment">提交</button>
      </div>
      <div class="comment-list">
        <div v-for="(comment, index) in comments" :key="index" class="comment-item">
          <span class="user">👤 {{ comment.user }}</span>
          <p class="content">{{ comment.content }}</p>
          <span class="time">{{ comment.time }}</span>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
// 资讯数据
const newsList = ref([
  {
    title: '乡村振兴政策最新解读',
    content: '农业农村部发布2023年乡村振兴重点扶持项目清单...',
    date: '2023-09-20',
    views: 1520,
    favorites: 234
  },
  {
    title: '智慧农业技术交流大会',
    content: '全国智慧农业创新论坛将于10月在山东举办...',
    date: '2023-09-18',
    views: 980,
    favorites: 156
  }
])

// 视频数据
const videos = ref([
  {
    title: '智慧农业实践：无人机播种技术',
    description: '展示现代化农业机械在稻田的精准作业场景',
    thumb: 'https://dummyimage.com/400x225/4CAF50/fff',
    views: 24500,
    likes: 1560,
    author: '省农业技术推广中心',
    duration: '12:30'
  },
  {
    title: '乡村网红直播带货全记录',
    description: '揭秘农产品从田间到直播间的全流程',
    thumb: 'https://dummyimage.com/400x225/8BC34A/fff',
    views: 18200,
    likes: 2345,
    author: '新农人联盟',
    duration: '08:45'
  },
  {
    title: '有机农场24小时',
    description: '记录生态循环农业的完整生产周期',
    thumb: 'https://dummyimage.com/400x225/CDDC39/fff',
    views: 16700,
    likes: 1890,
    author: '绿色农业发展协会',
    duration: '15:20'
  }
])

// 农产品数据
const products = ref([
  {
    name: '有机高山绿茶',
    description: '海拔1200米生态茶园，传统工艺制作',
    views: 890,
    favorites: 145
  },
  {
    name: '红心猕猴桃',
    description: '自然成熟无添加，维C含量超普通品种3倍',
    views: 1203,
    favorites: 287
  }
])

// 评论功能
const newComment = ref('')
const comments = ref([
  { user: '助农志愿者', content: '建议增加农产品溯源功能', time: '09-20 14:30' },
  { user: '农技专家', content: '可以组织线上种植技术分享会', time: '09-19 09:15' }
])

const addComment = () => {
  if (newComment.value.trim()) {
    comments.value.unshift({
      user: '当前用户',
      content: newComment.value,
      time: new Date().toLocaleDateString('zh-CN', { month: '2-digit', day: '2-digit' }) + ' ' + 
             new Date().toLocaleTimeString('zh-CN', { hour12: false, hour: '2-digit', minute: '2-digit' })
    })
    newComment.value = ''
  }
}
</script>

<style scoped>
.help-farmers-zone {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.title {
  text-align: center;
  color: #2c5f2d;
  margin: 40px 0;
}

.section-title {
  color: #4CAF50;
  border-left: 4px solid #4CAF50;
  padding-left: 12px;
  margin: 30px 0;
}

/* 视频模块样式 */
.video-section {
  margin: 40px 0;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
}

.video-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.video-card:hover {
  transform: translateY(-5px);
}

.thumbnail {
  height: 180px;
  background-size: cover;
  background-position: center;
  position: relative;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: 50%;
  font-size: 24px;
  color: #4CAF50;
  cursor: pointer;
  transition: all 0.3s ease;
}

.play-button:hover {
  background: white;
  transform: translate(-50%, -50%) scale(1.1);
}

.video-info {
  padding: 15px;
}

.video-info h3 {
  color: #2c5f2d;
  margin: 0 0 10px;
  font-size: 1.1em;
}

.desc {
  color: #666;
  font-size: 0.9em;
  line-height: 1.4;
  height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.meta {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85em;
  color: #888;
}

.stats {
  display: flex;
  gap: 15px;
}

.author {
  flex-shrink: 0;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .video-grid {
    grid-template-columns: 1fr;
  }
  
  .thumbnail {
    height: 200px;
  }
}

/* 资讯列表样式 */
.news-list {
  display: grid;
  gap: 20px;
}
.news-item {
  display: flex;
  background: #f8f8f8;
  border-radius: 8px;
  padding: 15px;
}
.image-placeholder {
  width: 200px;
  height: 150px;
  background: #ddd;
  border-radius: 6px;
  flex-shrink: 0;
}
.content {
  margin-left: 20px;
}
.desc {
  color: #666;
  line-height: 1.6;
}
.meta {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  color: #888;
}

/* 农产品展示 */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}
.product-card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  overflow: hidden;
}
.product-image {
  height: 180px;
  background: #eee;
}
.product-info {
  padding: 15px;
}
.product-info h3 {
  color: #2c5f2d;
  margin: 10px 0;
}

/* 评论区样式 */
.comment-input {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.comment-input input {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
.comment-input button {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 4px;
  cursor: pointer;
}
.comment-item {
  background: #f8f8f8;
  padding: 12px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.comment-item .time {
  color: #888;
  float: right;
}

/* 新增样式 */
.weather-alert {
  background: #fff3cd;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  align-items: center;
  margin: 20px 0;
}
.weather-alert .icon { font-size: 2em; margin-right: 15px; }

.policy-carousel {
  background: #e8f5e9;
  padding: 20px;
  border-radius: 8px;
}
.policy-item {
  padding: 15px;
  background: white;
  border-radius: 6px;
  margin: 10px 0;
}

.tech-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.tag {
  background: #4CAF50;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 10px;
}

.pioneer-card {
  text-align: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
}
.avatar {
  width: 80px;
  height: 80px;
  background: #ddd;
  border-radius: 50%;
  margin: 0 auto 15px;
}

.trace-card {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
  background: white;
  padding: 20px;
  border-radius: 8px;
}
.map-visual {
  height: 200px;
  background: #e8f5e9;
  border-radius: 6px;
}

.volunteer-section {
  background: #f8f8f8;
  padding: 20px;
  border-radius: 8px;
}
.mission {
  background: white;
  padding: 15px;
  margin: 10px 0;
  border-radius: 6px;
}
.progress {
  background: #4CAF50;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}

/* 响应式布局优化 */
@media (max-width: 768px) {
  .trace-card {
    grid-template-columns: 1fr;
  }
}
</style>